<template>
	<view class="order">
		<view class="order-c">
			<radio-group class="group" @change="radioChange">
				<label class="label" v-for="(item, index) in list" :key="item.value">
					<radio :value="item.value" :checked="item.value == current" />
					<view :class="{active:item.value == current}">{{item.name}}</view>
				</label>
			</radio-group>
			
			<view class="main">
				<view v-show ="current != '4'" class="main-c" v-for="(item,index) in orderList" :key="index">
					<view class="top">
						<text>订单编号：{{item.orderId}}</text> 
						<!-- {{item.id}} -->
						<text v-if="current!='4'">{{item.status == "0" ? "未付款" : item.status == "1" ? "等待发货" : item.status == "2" ? "已发货" : "已完成" }}</text>
						<text v-else>{{item.process == "0" ? "等待处理" : item.process == "1" ? "确认退货" : item.process == "2" ? "确认收货" : "拒绝退货" }}</text>
					</view>
					<view  v-for="el in item.subList " class="midl">
						<image :src="el.cover_img" mode="widthFix"></image>
						<view class="right">
							<view class="fir">
								<view class="title">
									<text>{{el.gname}}</text>
									<text v-if="current!='4'">¥{{el.price/100}}</text>
									<text v-else>¥{{el.order_price/100}}</text>
								</view>
								<view class="sbtn">
									<text>编号：{{el.sku_code}}</text>
									<!-- <text v-if="current=='4'">X{{item.totalCount}}</text> -->
									<text>X{{el.count}}</text>
								</view>
								<view class="sbtn">
									<text>规格：{{el.color_text}}</text>
									<view class="backing" v-if="item.status == '2' ">
										<button  size="mini" v-if="el.backId == null"  @click="backOrder(el,item.orderId)" type="default">申请退货</button>
										<text style="color: red;" v-else>退货中</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<text class="total">合计：¥{{item.totalPrice/100}}</text>
					
					<view class="bot">
						<view class="btn">
							<button v-if="item.status == '0' " type="default" @click="cancle(item.orderId)" size="mini">取消订单</button>
							<button v-if="item.status == '0' "  @click="pay(item.orderId)"  type="default" size="mini">付款</button>
							<!-- <button v-if="item.status == '2' "  @click="backOrder(item.orderId)"  type="default" size="mini">申请退货</button> -->
							<button v-if="item.status == '2' && current!=4 "  @click="done(item.orderId)"  type="default" size="mini">确认收货</button>
							<button v-if="item.status == '3' "  @click="delOrder(item.orderId)"  type="default" size="mini">删除订单记录</button>
						</view>
					</view>
				</view>
				<view v-show="current == '4'" v-for="el in afterOrder " class="main-c">
					<view class="top">
						<text>订单编号：{{el.orderId}}</text> 
						<text>{{el.process == "0" ? "等待处理" : el.process == "1" ? "确认退货" : el.process == "2" ? "确认收货" : "拒绝退货" }}</text>
					</view>
					<view  class="midl">
						<image :src="el.cover_img" mode="widthFix"></image>
						<view class="right">
							<view class="fir">
								<view class="title">
									<text>{{el.gname}}</text>
									<text >¥{{el.order_price/100}}</text>
								</view>
								<view class="sbtn">
									<text>编号：{{el.sku_code}}</text>
									<text >X{{el.count}}</text>
								</view>
								<view class="sbtn">
									<text>规格：{{el.color_text}}</text>
								</view>
							</view>
						</view>
					</view>
					<text  class="total">合计：¥{{el.order_price/100*el.count}}</text>
				</view>
				
				<uni-load-more @clickLoadMore="addMore"  :status="more"></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
	import {orderList,allDone, orderBackList,delOrderPre} from "../../../utils/order/index.js"
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		components: {uniLoadMore},
		data() {
			return {
				list:[
					{
						name:"待付款",
						value: "0"
					},
					{
						name:"已付款",
						value: "1"
					},
					{
						name:"待收货",
						value: "2"
					},
					{
						name:"已完成",
						value: "3"
					},
					{
						name:"申请退款",
						value: "4"
					}
				],
				current: "0",
				allList:[],
				info:{},
				show:true,
				isFresh:false,
				more: "more",
				page:{
					start:1,
					limit:10,
					lastPage:false
				},
				afterOrder:[]
			};
		},
		
		onLoad(options){
			let info = uni.getStorageSync("user")
			// console.log(this.allList)
			if(info){
				this.info = info
				this.current = options.count
				this.init()
			}else{
				uni.showModal({
					title: '未登录',
					content: '您未登录，需要登录后才能查看',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '../login/login'
							});
						}
					}
				});
			}
		},
		onPullDownRefresh(){
			this.isFresh = true
			this.init()
		},
		onReachBottom(){
			// console.log("opop")
			this.isFresh = false
			if(!this.page.lastPage){
				this.page.start++
				this.init()
			}else{
				this.more = "noMore"
			}
		},
		computed:{
			orderList(){
				// var item = uni.getStorageSync("unpayOrder")
				if(this.current == "0"){
					return this.allList.filter(ele => ele.status == "0")
				}else if(this.current == "1"){
					return this.allList.filter(ele => ele.status == "1")
				}else if(this.current == "2"){
					return this.allList.filter(ele => ele.status == "2")
				}else if(this.current == "3"){
					return this.allList.filter(ele => ele.status == "3")
				}else{
					return this.afterOrder
				}
			}
		},
		
		methods:{
			radioChange(e){
				this.current = e.detail.value
				var item  = this.allList.filter(ele => ele.status == "2")
				// console.log(item)
				window.location.hash = '#/pages/user/orderList/orderList?count='+this.current
			},
			//付款
			pay(orderId){
				let item  = this.allList.find(ele => ele.orderId == orderId)
				uni.navigateTo({
					url:`../../sort/doPay/doPay?price=${item.totalPrice}&orderId=${orderId}`
				})
			},
			//确认收货
			done(orderId){
				uni.showLoading({
				    title: '加载中...',
					mask:true
				});
				allDone({id:orderId})
				.then(res=>{
					console.log(res)
					if(res.data.code == "S"){
						uni.showToast({
						    title: '收货成功！',
						    duration: 2000
						});	
						uni.hideLoading();
						location.reload()
						this.init()
					}
				})
			},
			//申请退货
			backOrder(el,val){
				uni.navigateTo({
					url:"../applySale/applySale"
				})
				let backInfo = {
					...el,
					orderId:val
				}
				// console.log(backInfo)
				uni.setStorageSync("backInfo",backInfo)
			},
			//监听用户返回操作,强制返回上一级
			onBackPress(){
				uni.switchTab({
					url: '../user'
				})
				return true
			},
			// ..删除订单记录
			delOrder(val){
				uni.showToast({
					title: '该功能继续完善中...',
					duration: 2000,
					icon:'none'
				})
			},
			
			//取消订单
			cancle(orderId){
				delOrderPre({orderId})
				.then(res=>{
					// console.log(res)
					if(res.data.code == "S"){
						this.init()
						location.reload()
					}else{
						uni.showToast({
							title: '删除订单失败!',
							duration: 1000,
							icon:'none'
						})
					}
				})
			},
			//点击加载更多
			addMore(e){
				// console.log(e)
				if(!this.page.lastPage){
					this.page.start++
					this.init()
				}else{
					this.more = "noMore"
				}
			},
			init(){
				uni.showLoading({
				    title: '加载中...',
					mask:true
				});
				orderList({
					limit:this.page.limit,
					start:this.page.start,
					userId: this.info.id
				})
				.then(res=>{
					uni.hideLoading();
					uni.stopPullDownRefresh()
					var items = res.data.data
					// console.log(items)
					this.page.lastPage = items.lastPage
					if(items.lastPage){
						this.more = "noMore"
					}
					this.allList = this.allList.concat(items.list)
				})
				//退单列表
				orderBackList({
					userId: this.info.id
				})
				.then(res=>{
					this.afterOrder = res.data.data
					// console.log(this.afterOrder)
				})
			}
		}
	}
</script>
<style>
	page{
		/*  #ifdef APP-PLUS || MP-WEIXIN */
		height: 100%;
		background-color: #F1ECE7;
		/*  #endif  */
	}
</style>
<style lang="scss" scoped>
body,html,uni-page-body {
	height: 100%!important;
	background-color: #F1ECE7;
}
.order{
	width: 100%;
	height: 100%;
	.order-c{
		overflow: auto;
		width: 100%;
		height: auto;
		background-color: #F1ECE7;
		.group{
			position: fixed;
			left: 0;
			top: 70rpx;
			/*  #ifdef APP-PLUS || MP-WEIXIN */
			top:-20rpx;
			/*  #endif  */
			overflow: hidden;
			width: calc(100% - 80rpx);
			padding: 0 40rpx;
			background-color: #354E44;
			font-size: 30rpx;
			color: #FFFFFF;
			letter-spacing: 2.14rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			z-index: 90;
			transition: all 0.3s ease;
			// transform: translateY(-1rpx);
			.label{
				margin-top: 24rpx;
				width: 140rpx;
				height: 80rpx;
				line-height: 60rpx;
				text-align: center;
				transition: all 0.3s ease;
				view{
					border-bottom: 2rpx solid transparent;
					box-sizing: border-box;
				}
				radio{
					display: none;
				}
				.active{
					color: #007AFF;
					border-bottom: 2rpx solid #F1ECE7;
					transition: all 0.3s linear;
				}
			}
		}
		.main{
			margin-top: 120rpx;
			.main-c{
				margin: 0 auto 40rpx;
				padding: 18rpx 36rpx 24rpx;
				width: 600rpx;
				height: auto;
				background: #FFFFFF;
				box-shadow: 0 8rpx 16rpx 0 rgba(83,66,49,0.08);
				border-radius: 24rpx;
				// margin-bottom: 40rpx;
				.top{
					width: 100%;
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: #3E3E3E;
					margin-bottom: 29rpx;
				}
				.midl{
					width: 100%;
					display: flex;
					justify-content: space-between;
					image{
						width: 162rpx;
						height: 162rpx!important;
						margin-right: 28rpx;
					}
					.right{
						// flex: 1;
						display: flex;
						align-content: space-between;
						flex-wrap: wrap;
						.fir{
							display: flex;
							flex-wrap: wrap;
							width: 100%;
							.sbtn{
								button{
									opacity: 0.5;
									border: 2rpx solid #6C6C6C;
									border-radius: 10rpx;
									margin: 0;
									width: 60px;
									padding: 0;
								}
								.backing{
									width: auto;
								}
							}
							view{
								width: 100%;
								display: flex;
								justify-content: space-between;
								text{
									font-size: 22rpx;
									color: #8D8D8D;
								}
							}
							.title{
								width: 100%;
								display: flex;
								justify-content: space-between;
								text{
									font-size: 26rpx;
									color: #3E3E3E;
								}
								text:last-child{
									color: #8D8D8D;
								}
							}	
						}
						
						
					}
				}
				.total{
					width: 100%;
					display: flex;
					flex-direction: row-reverse;
					font-size: 26rpx;
					color: #3E3E3E;
				}
				.bot{
					display: flex;
					flex-direction: row-reverse;
					.btn{
						margin-top: 17rpx;
						button{
							opacity: 0.5;
							border: 2rpx solid #6C6C6C;
							border-radius: 10rpx;
						}
						
						button:last-child{
							opacity: 0.76;
							border: 2rpx solid #2D4F43;
							border-radius: 10rpx;
							margin-left: 32rpx;
						}
					}
					
				}
			}
		}
		
	}
}
</style>
